<template>
    <div class="baiduMap-container">
        <el-dialog
            :title="$t('overview.mapPowerStation')"
            :visible="visibleBaiduMap"
            v-if="visibleBaiduMap"
            width="800px"
            @close="()=>{$store.commit('setVisibleBaiduMap',false)}">
            <div ref="map" id="allmap">
                <baidu-map :style="{width:mapData.width,height:mapData.height}" class="map" :ak="baiduMapKey" :zoom="mapData.zoom" :center="{lng: mapData.center.lng, lat: mapData.center.lat}"
    @ready="handler" :scroll-wheel-zoom="true">
                    <!--缩放控件-->
                    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
                    <!--聚合动态添加的点坐标-->
                    <!-- <bm-marker-clusterer :averageCenter="true">
                        <bm-marker v-for="marker of markers" :key="marker.code" :position="{lng: marker.longitude, lat: marker.latitude}"></bm-marker>
                    </bm-marker-clusterer> -->
                    <template v-if="mapData.showType=='marker'||mapData.showType==null">
                        <bm-marker  v-for="(marker,i) of mapData.markers" :key="marker.lng+i" :position="{lng: marker.lng, lat: marker.lat}"></bm-marker>
                    </template>
                </baidu-map>
            </div>
        </el-dialog>
    </div>
</template>

<script scoped>
//百度地图
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmOverlay from 'vue-baidu-map/components/overlays/Overlay'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
export default {
    name:'Header',
    components:{
        BaiduMap,
        BmMarker,
        BmOverlay,
        BmNavigation,
        BmMarkerClusterer,
        BmInfoWindow
    },
    props:{
        mapData:{
            type:Object,
            default:()=>{
                return {
                    width:'100%',
                    height:'400px',
                    zoom:10,
                    center:{
                        lng:113,
                        lat:29
                    },
                    mapObj:{},//地图对象
                    markers:[],//地图上所有的标记
                    showType:'marker'
                }
            }
        }
        
    },
    data(){
        return {
        }
    },
    watch:{

    },
    computed: {
        visibleBaiduMap(){
            return this.$store.state.sysStore.visibleBaiduMap
        }
    },
    mounted(){
    },
    methods:{
        handler({BMap,map}){
            this.mapData.mapObj=map;
            this.mapData.width=this.$refs.map.clientWidth
            // console.log(this.mapData.markers)

            if(this.mapData.showType=='site'){
                this.initSiteLabel(BMap)
            }else if(this.mapData.showType=='count'){
                this.initSiteCount(BMap)
            }
            
        },
        initSiteLabel(BMap){
            var pointArr=this.mapData.markers
            for(var i=0;i<pointArr.length;i++){
                var opts = {
                    position: new BMap.Point(pointArr[i].lng, pointArr[i].lat), // 指定文本标注所在的地理位置
                    offset: new BMap.Size(0, 0) // 设置文本偏移量
                };
                var label = new BMap.Label(pointArr[i].label, opts);// 创建文本标注对象
                label.setStyle({border:'none',padding:0});// 自定义文本标注样式
                var content = '<div class="baidu-clustMarker"><a class="baidu-clustMarker-a">'
		        	          +pointArr[i].label+'</a>'+
		        			  '<div class="baidu-clustMarker-divIcon"></div></div>';
		        label.setContent(content);
                this.mapData.mapObj.addOverlay(label);
            }
        },
        initSiteCount(BMap){
            var pointArr=this.mapData.markers
            for(var i=0;i<pointArr.length;i++){
                if(pointArr[i].count!=0&&pointArr[i].count!=null){
                    var opts = {
                        position: new BMap.Point(pointArr[i].lng, pointArr[i].lat), // 指定文本标注所在的地理位置
                        offset: new BMap.Size(-20, -20) // 设置文本偏移量
                    };
                    var label = new BMap.Label(pointArr[i].count, opts);// 创建文本标注对象
                    label.setStyle({border:'none',padding:0,backgroundColor:'transparent'});// 自定义文本标注样式
                    var content = '<div class="map_marks"><a class="baidu-clustMarker-a">'
                                  +'<div class="name">'+pointArr[i].name+'</div>'
                                  +pointArr[i].count+
                                  '</a>'+'</div>';
                    label.setContent(content);
                    this.mapData.mapObj.addOverlay(label);
                }
            }
        }
    }
}
</script>

<style lang="less">
@color_box_bg:#EFEFEF;
@color_title:#444;
@color_text:#636162;
@color_unit:#636162;
@color_light:#ff8920;
@border_bottom:1px dashed #D1D1D1;
@border_radius:3px;
@color_unit:#8a8a8a;
.baiduMap-container{
   .el-dialog__wrapper .el-dialog .el-dialog__body{
       padding: 0;
   }
}
.BMapLib_Drawing_panel {
      border: 1px solid #666;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
      width: 194.4px!important;
      cursor: pointer;
      border: 1px solid gray;
      position: absolute;
      z-index: 10;
      height: 49px;
      text-size-adjust: none;
      bottom: auto;
      right: 10px;
      top: 10px;
      left: auto
    }

    .BMapLib_box {
      border-right: 1px solid #d2d2d2;
      float: left;
      height: 100%;
      width: 64px;
      cursor: pointer
    }

    .map_marks a{
        position: relative;
        display: block;
        width: 40px;
        height: 40px;
        background: #fd5f5f;
        border-radius: 50%;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
        text-align: center;
        line-height: 40px;
        transform:translate(-50%,-50%);
        color: #fff;
        .name{
            display: none;
            position: absolute;
            top: -20px;
            left: 50%;
            background: rgba(255,255,255,.9);
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
            padding: 5px;
            line-height: 15px;
            border-radius: 3px;
            transform: translateX(-50%);
            color: #444;
        }
    }

    .map_marks a:hover {
        z-index: 1;
        background: #eb3f3f;
        .name{
            display: block;
        }
    }
    .BMapLabel:hover{
        z-index: 1 !important;
    }

    .markerClustererSpan {
      width: 92px;
      text-align: center;
      display: block;
      color: #fff;
      font-family: Arial, sans-serif;
      font-size: 10px;
      border-radius: 25px
    }

    .textIconP {
      font-weight: 400;
      display: inline-block;
      font-size: 12px
    }

    .map_mark_inner .map_mark_price .b {
      color: #fff;
      font-family: Arial, sans-serif;
      width: 92px;
      display: block;
      text-align: center;
      border-radius: 25px;
      font-size: 12px
    }

    .baidu-clustMarker .baidu-clustMarker-a {
      border-radius: 3px;
      background-color: #f14646;
      padding: 0 5px;
      font-size: 12px;
      color: #fff;
      position: relative;
      white-space: nowrap;
      overflow: visible;
      opacity: .9;
      z-index: 100;
      top: -22px;
      left: -14px
    }

    .baidu-clustMarker .baidu-clustMarker-divIcon {
      border-top: 6px solid #f14646;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      margin-left: 4px;
      z-index: 100;
      margin-top: -23px;
      margin-left: -5px;
      width: 0;
      height: 0;
    }

    .baidu-clustMarker-a:hover {
      background: #199752;
      z-index: 1000
    }

    .baidu-clustMarker .baidu-clustMarker-a:hover+.baidu-clustMarker-divIcon {
      border-top: 6px solid #199752;
      z-index: 1000
    }

    .google-clustMarker-a {
      border-radius: 3px;
      background-color: #f14646;
      padding: 0 5px;
      font-size: 12px;
      color: #fff!important;
      position: relative;
      white-space: nowrap;
      overflow: visible;
      opacity: .9;
      z-index: 100
    }

    .google-clustMarker-divIcon {
      border-top: 6px solid #f14646;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      margin-left: 4px;
      z-index: 100;
      width: 6px
    }

    .google-clustMarker-a:hover {
      background: #199752;
      z-index: 1000
    }

    .google-clustMarker .google-clustMarker-a:hover+.google-clustMarker-divIcon {
      border-top: 6px solid #199752;
      z-index: 1000
    }
    /*google地图laber进页面隐藏*/
    #allmap .map_marks .b{
    	display:none;
    }
    .map label{
        background: transparent;
    }
</style>